<template>
  <div class="app-market-container">
    <div class="market-header">
      <h1>应用市场</h1>
      <p>发现优质AI应用</p>
    </div>
    
    <div class="market-content">
      <div class="search-section">
        <a-input-search
          v-model:value="searchKeyword"
          placeholder="搜索应用..."
          size="large"
          @search="handleSearch"
          style="max-width: 400px"
        />
      </div>
      
      <div class="filter-section">
        <a-space>
          <a-select
            v-model:value="selectedCategory"
            placeholder="选择分类"
            style="width: 120px"
            @change="handleCategoryChange"
          >
            <a-select-option value="">全部分类</a-select-option>
            <a-select-option value="工具类">工具类</a-select-option>
            <a-select-option value="娱乐类">娱乐类</a-select-option>
            <a-select-option value="教育类">教育类</a-select-option>
          </a-select>
        </a-space>
      </div>
      
      <a-spin :spinning="loading">
        <a-row :gutter="[16, 16]">
          <a-col v-for="app in apps" :key="app.id" :xs="24" :sm="12" :md="8" :lg="6">
            <a-card hoverable class="app-card" @click="viewAppDetail(app)">
              <template #cover>
                <div class="app-cover">
                  <img v-if="app.cover" :src="app.cover" :alt="app.appName" />
                  <div v-else class="default-cover">
                    <AppstoreOutlined />
                  </div>
                </div>
              </template>
              
              <a-card-meta :title="app.appName" :description="app.description" />
              
              <div class="app-meta">
                <a-tag color="blue">{{ app.type }}</a-tag>
                <span class="app-time">{{ formatTime(app.createTime) }}</span>
              </div>
            </a-card>
          </a-col>
        </a-row>
        
        <a-empty v-if="!loading && apps.length === 0" description="暂无应用" />
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { AppstoreOutlined } from '@ant-design/icons-vue'
import { getAppList } from '@/api/app'
import type { App } from '@/types/api'

const router = useRouter()

const loading = ref(false)
const apps = ref<App[]>([])
const searchKeyword = ref('')
const selectedCategory = ref('')

const fetchApps = async () => {
  try {
    loading.value = true
    const response = await getAppList()
    if (response.code === 0) {
      apps.value = response.data || []
    }
  } catch (error) {
    console.error('获取应用列表失败:', error)
    message.error('获取应用列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  fetchApps()
}

const handleCategoryChange = () => {
  fetchApps()
}

const viewAppDetail = (app: App) => {
  // 跳转到Workflow生成页面，传递应用ID和应用信息
  router.push({
    path: '/workflow-generate',
    query: {
      appId: app.id.toString(),
      app: JSON.stringify(app)
    }
  })
}

const formatTime = (time: string) => {
  return new Date(time).toLocaleDateString()
}

onMounted(() => {
  fetchApps()
})
</script>

<style scoped>
.app-market-container {
  padding: 24px;
}

.market-header {
  text-align: center;
  margin-bottom: 32px;
}

.market-header h1 {
  font-size: 32px;
  margin: 0 0 8px 0;
}

.search-section {
  margin-bottom: 16px;
  text-align: center;
}

.filter-section {
  margin-bottom: 24px;
}

.app-card {
  height: 100%;
  cursor: pointer;
}

.app-cover {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.app-cover img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.default-cover {
  font-size: 48px;
  color: #ccc;
}

.app-meta {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-time {
  font-size: 12px;
  color: #999;
}
</style>